import React from 'react';
import { connect } from 'dva';
import {Popconfirm,Modal,Table} from 'antd';
import { routerRedux } from 'dva/router';
import {FFTableView} from './../../public/components/';
import {FFTitle,FFButtons,FFSearchs} from './../../public/business/index';
import './index.less';
import AddModal from './add';
import {openModal} from '../../utils';

function dome({dispatch, dome}) {
  const {pageParam,list,total,loading} = dome;
  const actionTypeHead="dome/";

  //点击编辑  显示弹出框
  function editHander(type,record) {
    if(type=="edit"){
      dispatch({
        type: 'addDome/send',
        payload: {visible:true,id:1}
      });
    } else {
      openModal("confirm",{
                 content:`确实删除 ${record.dome} 这条数据 ?`,
                 onOk:function () {
                   dispatch({
                     type: `${actionTypeHead}del`,
                     payload: {id:record.id}
                   });
                }
      });
    }
  };
  // 按钮组参数
  const Searchs = {
    ele:[
      {displayName:"欢ID", field:"userId", type:"string",defaultValue:"测试"},
      {displayName:"类型", field:"select",defaultValue:"12",selectorKey:"key",selectorValue:"value",onchange:function (data) {}, type:"select",selectData:[{"key":"12","value":"年费"},{"key":"1","value":"月费"}],multiple:false},
      {displayName:"开通时间", field:"startTime", type:"timepicker",timeFormat:"YYYY/MM/DD",defaultValue:"2017-11-01"},
      {displayName:"有效时间", field:"endTime", type:"timepickers",timeFormat:"YYYY-MM-DD",defaultValue:"2017-11-01"}
    ],
    clickFn(data){
      dispatch({
        type: 'dome/fetch',
        payload: {filterData:data}
      });
    }
  };
  // 按钮组参数
  const Buttons = {
    ele:[{name:"新增",type:"add1"},{name:"新增2",type:"add2"}],
    clickFn(data){
      switch (data.type){
        case "add1":{
          dispatch({
            type: 'addDome/send',
            payload: {visible:true,id:0}
          });
        }
      }
    }
  };
  const expandedRowRender = () => {
    const columns = [
      { title: 'Date', dataIndex: 'date', key: 'date' },
      { title: 'Name', dataIndex: 'name', key: 'name' },
      { title: 'Status', key: 'state', render: () => <span>Finished</span> },
      { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
        render: () => (
          <span className="table-operation">
            <a href="#">Pause</a>
            <a href="#">Stop</a>
          </span>
        ),
      },
    ];

    const data = [];
    for (let i = 0; i < 3; ++i) {
      data.push({
        key: i,
        date: '2014-12-24 23:12:00',
        name: 'This is production name',
        upgradeNum: 'Upgraded: 56',
      });
    }
    // 表格配置参数
    const tableViewProp = {
      columns: columns,
      dataSource: data
    };
    return (
    <FFTableView {...tableViewProp}/>
    );
  };

  // 表格配置参数
  const tableViewProps = {
    columns: [
      {title: 'dome', dataIndex: 'dome', key: 'dome',  className:"tableCenter",render: (text, record) => (text ? text:'' )},
      {title: '时间',  dataIndex: 'createTime',sorter:true, key: 'createTime', className:'tableCenter'},
      {title: '操作',  dataIndex: 'operation', key: 'operation', className:'tableCenter', render: (text, record) => (
        <span className='operation'>
          <a onClick={editHander.bind(null,"edit",record)}>编辑</a>
          <a style={{marginLeft:'10px'}} onClick={editHander.bind(null,"del", record)}>删除</a>
        </span>
      )}
    ],
    dataSource: list,
    total: total,
    loading: loading,
    expandedRowRender:expandedRowRender,
    pageParam: {
      current: pageParam.pageNo,
      pageSize: pageParam.pageSize,
      // 一页数量
      onShowSizeChange: (current, pageSize) => {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              pageNo: 1,
              pageSize: pageSize,
              keyword: ''
            }
          }
        });
      },
      // 翻页
      onChange: (current) => {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              ...pageParam,
              pageNo: current,
            },
          }
        });
      },
      //排序回调 需要对应columns中, 开启sorter:true
      sortParamChange(pagination, filters, sorter) {
        if (sorter.field) {
          dispatch({
            type: actionTypeHead + 'setFilterParam',
            payload: {
              order: sorter.order,
              field: sorter.field,
              type: 'sort'
            }
          });
        }
      },
      //搜索关键字
      onSearch (value) {
        dispatch({
          type: actionTypeHead + 'fetch',
          payload: {
            pageParam: {
              ...pageParam,
              pageNo: 1,
              keyword: value
            }
          }
        })
      }
    }
  };
  return (
    <div className='dome'>
      <FFTitle name="当前位置：模板管理>模板一"/>
      <FFButtons {...Buttons}/>
      <FFSearchs {...Searchs}/>
      <FFTableView {...tableViewProps}/>
      <AddModal></AddModal>
    </div>
  );
}
function mapStateToProps({dome}) {
  return {dome};
}
export default connect(mapStateToProps)(dome);

